<template>
  <div class="Article">
    <admin-breadcrumb :breadcrumb="breadcrumb" />
    <!-- 主要视图区域 -->
    <el-card>
      <el-row :gutter="0">
        <!-- 文章搜索 -->
        <el-col :span="8">
          <el-input placeholder="搜索文章" v-model="queryInfo.query" clearable @clear="getArticleList">
            <el-button slot="append" icon="el-icon-search" @click="getArticleList"></el-button>
          </el-input>
        </el-col>
        <!-- 写文章 -->
        <el-col :span="1">
          <el-button type="success" @click="toEditor">写文章</el-button>
        </el-col>
      </el-row>
      <!-- 文章表格 -->
      <el-table id="articleTable" :data="articleList" stripe style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline>
              <el-form-item>
                <span>{{ props.row.articleAbstract }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="articleTitle" label="标题" fit/>
        <el-table-column prop="articleAuthor" label="作者" />
        <el-table-column prop="articleDate" label="发布日期" />
        <!-- 对文章的可执行操作 -->
        <el-table-column label="操作" min-width="180">
          <template v-slot="scope">
            <!-- 查看文章 -->
            <el-tooltip effect="dark" content="查看文章" placement="top" :open-delay="500" :enterable="false">
              <el-button type="primary" icon="el-icon-view" size="small" @click="viewArticle(scope.row.id)" />
            </el-tooltip>
            <!-- 修改文章 -->
            <el-tooltip effect="dark" content="修改文章" placement="top" :open-delay="500" :enterable="false">
              <el-button type="warning" icon="el-icon-edit" size="small" @click="editArticle(scope.row)" />
            </el-tooltip>
            <!-- 删除文章 -->
            <el-tooltip effect="dark" content="删除文章" placement="top" :open-delay="500" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="small" @click="removeArticle(scope.row.id)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <div class="page">
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="queryInfo.pagesize" background layout="total, prev, pager, next, jumper" :total="count"></el-pagination>
    </div>
  </div>
</template>

<script>
import * as utils from "utils/index";
import AdminMdEditor from "components/content/admin/AdminMdEditor";
export default {
  name: "Article",
  metaInfo: {
    title: "后台管理-文章管理",
  },
  data() {
    return {
      breadcrumb: ["内容管理", "文章列表"],
      // 查询文章的对象
      queryInfo: {
        // 查询的参数，可为空
        query: "",
        // 当前页数
        pageNum: 1,
        // 每页的条目数
        pageSize: 10,
      },
      // 文章列表
      articleList: [],
      // 文章总量
      count: 0,
    };
  },
  components: {
    AdminMdEditor,
  },
  created() {
    this.getArticleList();
  },
  methods: {
    // 请求一页文章
    async getArticleList() {
      const { data: res } = await this.$http.get("admin/article", {
        params: this.queryInfo
      });
      if (res.code !== 200) return this.$message.error("获取文章列表出错");
      const loading = this.$loading({
        target: "#articleTable",
        lock: true,
      });
      this.articleList = res.data.articleList;
      this.articleList.forEach(item => {
        item.articleDate = utils.parseTime(item.articleDate, "{y}-{m}-{d} {h}:{i}:{s}")
      });
      this.count = res.data.count;
      loading.close();
    },

    // 写文章
    toEditor() {
      window.sessionStorage.removeItem("article");
      this.$router.push("/admin/article/editor");
    },

    // 跳转到前台查看文章
    viewArticle(id) {
      let articleUrl = this.$router.resolve({
        path: "../../jotters/" + id,
      });
      // 打开一个新的窗口
      window.open(articleUrl.href, "_blank");
    },

    // 修改文章
    editArticle(article) {
      window.sessionStorage.setItem("article", JSON.stringify(article));
      window.sessionStorage.setItem(
        "pageNum",
        JSON.stringify(this.queryInfo.pageNum)
      );
      this.$router.push({
        name: "Editor",
      });
    },

    // 删除文章
    async removeArticle(id) {
      const { data: res } = await this.$http.delete("admin/article", {
        params: {
          id: id,
        },
      });
      if (res.code === 200) this.getArticleList();
    },

    // 监听页码变化
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNum = currentPage;
      this.getArticleList();
    },
  },
};
</script>

<style lang="less" scoped>
.abstract-text {
  white-space: nowrap;
}
</style>